<template>
  <div id="basic">
    <!-- 膳食营养分析报告 -->
    <div style="">
      <div style=" width: 100%; background-color:#2ab28b;  text-align: center; margin:auto">
        <div style="font-size: 40px; font-weight: bold; color: #ffffff;padding-top:20px;">{{ Titlename }}</div>
        <!-- <span style="font-size: 30px; color: #666666; margin-left: 20px;display: block;">基本信息报告</span> -->
        <div style="margin-top:30px;font-size: 24px;padding-bottom: 20px;font-weight: bold;color:#333333;">
          儿童膳食结构(FFQ)与行为认知训练报告单</div>
      </div>
    </div>
    <div style="width: 100%; height: 40px; background-color: #2AB28B; margin-top: 10px; display: flex;">
          <div><img src="../.././assets/img/12.jpg" style="height: 40px" alt="" /></div>
          <div style="font-size: 20px; margin-left: 10px; line-height: 40px; color: #fff;">儿童基本信息</div>
        </div>
        <div
        style="width: 1070px; border-top: 2px solid #09a578; border-right: 2px solid #09a578;  margin-top: 10px;font-size: 14px;"
        v-if="times == 2">
        <div style="display: flex">
          <div
            style="background-color: rgb(42, 178, 139); width: 10%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            儿童姓名
          </div>
          <div
            style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            {{ contents.username ?? '[]' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            性别
          </div>
          <div
            style="width: 15%; height: 40px; text-align: center;line-height: 40px;border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            {{ contents.sex == 1 ? '女' : '男' ?? '[]' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139); width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            出生日期
          </div>
          <div
            style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            {{ birth ?? '[]' }}
          </div>
          <div
            style=" background-color: rgb(42, 178, 139); width: 10%; height: 40px; text-align: center; line-height: 40px;color:#fff; border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            年龄
          </div>
          <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #09a578;">
            {{ births }}
          </div>
        </div>
        <div style="display: flex">
          <div
            style="background-color: rgb(42, 178, 139); width: 10%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            身高
          </div>
          <div
            style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            {{ contents.height ? contents.height + 'CM' : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            体重
          </div>
          <div
            style="width: 15%; height: 40px; text-align: center;line-height: 40px;border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            {{ contents.weight ? contents.weight + 'KG' : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139); width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            监护人姓名
          </div>
          <div
            style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            {{ contents.guardian_name ?? '[]' }}
          </div>
          <div
            style=" background-color: rgb(42, 178, 139); width: 10%; height: 40px; text-align: center; line-height: 40px;color:#fff; border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            监护人手机号
          </div>
          <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #09a578;">
            {{ contents.guardian_mobile ?? '[]' }}
          </div>
        </div>
        <div style="display: flex">
          <div
            style="background-color: #2AB28B; width: 9.9%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            检测日期</div>
          <div style="width: 40%; height: 40px; border-bottom: 2px solid #09a578; line-height: 40px; text-indent: 20px;border-right: 2px solid #09a578;">
            {{ report_time }}
          </div>
          <div
            style="background-color: #2AB28B; width: 9.9%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            BMI</div>
          <div style="width: 40%; height: 40px; border-bottom: 2px solid #09a578; line-height: 40px; text-indent: 20px;">
            {{ BMIs }}
          </div>
        </div>
      </div>
      <div style="width: 1070px; border-top: 2px solid #09a578; border-right: 2px solid #09a578;  margin-top: 10px"
        v-if="times == 1">
        <div style="display: flex">
          <div
            style="background-color: #2AB28B; width: 9.9%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            检测日期</div>
          <div style="width: 90%; height: 40px; border-bottom: 2px solid #09a578; line-height: 40px; text-indent: 20px;">
            {{ report_time }}
          </div>
        </div>
        <div style="display: flex">
          <div
            style="background-color: rgb(42, 178, 139); width: 10%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            儿童姓名
          </div>
          <div
            style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            {{ contents.username ?? '[]' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            性别
          </div>
          <div
            style="width: 15%; height: 40px; text-align: center;line-height: 40px;border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            {{ contents.sex == 1 ? '女' : '男' ?? '[]' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139); width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            出生日期
          </div>
          <div
            style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            {{ birth ?? '[]' }}
          </div>
          <div
            style=" background-color: rgb(42, 178, 139); width: 10%; height: 40px; text-align: center; line-height: 40px;color:#fff; border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            监护人姓名
          </div>
          <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #09a578;">
            {{ contents.guardian_name ?? '[]' }}
          </div>
        </div>
        <div style="display: flex">
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            监护人手机号
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.guardian_mobile ?? '[]' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            身高
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.height ? contents.height + 'CM' : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            体重
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.weight ? contents.weight + 'KG' : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            头围
          </div>
          <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #09a578;">
            {{ contents.touwei ? contents.touwei + 'CM' : '' }}
          </div>
        </div>
        <div style="display: flex">
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            出生身长
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.chushengsg ? contents.chushengsg + 'CM' : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            出生体重
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.chushengtz ? contents.chushengtz + 'KG' : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            腹围
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.fuwei ? contents.fuwei + 'CM' : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            血型
          </div>
          <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #09a578;">
            {{ contents.xuexing_value ? contents.xuexing_value : '' }}
          </div>
        </div>
        <div style="display: flex">
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            民族
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.minzu_value ? contents.minzu_value : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            与监护人关系
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.guanxi_value ? contents.guanxi_value : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            家长受教育程度
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.jiaoyu_value ? contents.jiaoyu_value : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            出生情况
          </div>
          <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #09a578;">
            {{ contents.birthSituation_value ? contents.birthSituation_value : '' }}
          </div>
        </div>
      </div>
    <div style="
        width: 100%;
        height: 40px;
        background-color: #2ab28b;
        margin-top: 20px;
        display: flex;
      ">
      <div><img src="../../assets/img/19.jpg" style="height: 40px" alt="" /></div>
      <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
        膳食结构分析(日均值)
      </div>
    </div>
    <!-- <div style=" page-break-after:left;"></div> -->
    <div
      style="width:98%;border:2px solid #2ab28b;text-align:center;line-height:40px;margin-top:20px;margin-left:10px;font-size:12px;">
      <div style="display:flex;">
        <div class="biao1" style="width:12.5%">膳食结构</div>

        <div class="biao7"
          :style="item.product_energy < item.systam_down ? 'color:red' : item.product_energy >= item.systam_down && item.product_energy <= item.systam_up ? 'color:black' : 'color:red'"
          v-for="(item, index) in pagoda" :key="index" style="width:12.5%">{{ item.title == undefined
            ? '' : item.product_energy < item.systam_down ? '▼' + item.title : item.product_energy >= item.systam_down &&
              item.product_energy <= item.systam_up ? '✔' + item.title : '▲' + item.title }}</div>
        </div>
        <div style="display:flex;">
          <div class="biao1" style="width:12.5%">推荐(g)</div>
          <div class="biao7" v-for="(item, index) in pagoda" :key="index" style="width:12.5%">{{
            item.title == undefined ? '' : item.systam_down + '~' + item.systam_up }}</div>
        </div>
        <div style="display:flex;">
          <div class="biao1" style="width:12.5%">实际</div>
          <div class="biao7" v-for="(item, index) in pagoda" :key="index" style="width:12.5%">{{
            item.title == undefined ? '' : (item.product_energy).toFixed(2) }}
          </div>
        </div>
        <div style="display:flex;">
          <div class="biao5" style="width:14.5%">占比</div>
          <div class="biao7" v-for="(item, index) in pagoda" :key="index" style="width:14.5%">
             {{item.product_energy < item.systam_down ?  Math.floor((item.product_energy-item.systam_down)/item.systam_down*100* 100) / 100+'%' : item.product_energy >= item.systam_down && item.product_energy <= item.systam_up ? 100+'%': item.product_energy > item.systam_up ? '+'+ Math.floor(((item.product_energy-item.systam_up)/item.systam_up + 1) *100* 100) / 100+'%' :''}}
          </div>
        </div>
      </div>
      <ChildViewDietary></ChildViewDietary>
      <!-- <div style="width: 100%; height: 40px;background-color: #2ab28b;margin-top: 20px;display: flex;page-break-before:always;">
      <div><img src="../../assets/img/14.jpg" style="height: 40px" alt="" /></div>
      <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
        膳食记录
      </div>
    </div> -->
      <!-- <div style="width:98%;border:2px solid #2ab28b;text-align:center;font-size:12px;margin-top:20px;margin-left:10px;">
        <div style="display:flex">
          <div class="biao1" style="width:16%;height:40px;line-height:40px">菜名</div>
          <div class="biao1" style="width:12%;height:40px;line-height:40px">能量</div>
          <div class="biao1" style="width:12%;height:40px;line-height:40px">脂肪</div>
          <div class="biao1" style="width:12%;height:40px;line-height:40px">钙</div>
          <div class="biao1" style="width:12%;height:40px;line-height:40px">镁</div>
          <div class="biao1" style="width:12%;height:40px;line-height:40px">锌</div>
          <div class="biao1" style="width:12%;height:40px;line-height:40px">维生素A</div>
          <div class="biao1" style="width:12%;height:40px;line-height:40px">维生素B1</div>
        </div>
        <div  v-for="(item,index) in diet" :key="index">
          <div style="display:flex;">
            <div class="biao2" style="width:16%;height:40px;line-height:40px">{{item.food_name}}</div>
            <div class="biao2" style="width:12%;height:40px;line-height:40px">{{item.energy ? Math.floor(item.energy * 100) / 100: 0}}</div>
            <div class="biao2" style="width:12%;height:40px;line-height:40px">{{item.fat ? Math.floor(item.fat * 100) / 100 : 0}} </div>
            <div class="biao2" style="width:12%;height:40px;line-height:40px">{{item.calcium ? Math.floor(item.calcium * 100) / 100 :0}}</div>
            <div class="biao2" style="width:12%;height:40px;line-height:40px">{{item.magnesium ? Math.floor(item.magnesium * 100) / 100 :0}}</div>
            <div class="biao2" style="width:12%;height:40px;line-height:40px">{{item.zinc ?  Math.floor(item.zinc * 100) / 100   :0}}</div>
            <div class="biao2" style="width:12%;height:40px;line-height:40px">{{item.vitamin_a ?   Math.floor(item.vitamin_a * 100) / 100   :0}}</div>
            <div class="biao2" style="width:12%;height:40px;line-height:40px">{{item.vitamin_b1 ?  Math.floor(item.vitamin_b1 * 100) / 100   :0}}</div>
          </div>
        </div>
      </div>
      <div style="width:98%;border:2px solid #2ab28b;text-align:center;font-size:12px;margin-top:20px;margin-left:10px;">
        <div style="display:flex">
            <div class="biao1" style="width:16%;height:40px;line-height:40px">菜名</div>
          <div class="biao1" style="width:10.5%;height:40px;line-height:40px">维生素C</div>
          <div class="biao1" style="width:10.5%;height:40px;line-height:40px">蛋白质</div>
          <div class="biao1" style="width:10.5%;height:40px;line-height:40px">碳水</div>
          <div class="biao1" style="width:10.5%;height:40px;line-height:40px">钠</div>
          <div class="biao1" style="width:10.5%;height:40px;line-height:40px">铁</div>
          <div class="biao1" style="width:10.5%;height:40px;line-height:40px">硒</div>
          <div class="biao1" style="width:10.5%;height:40px;line-height:40px">维生素E</div>
          <div class="biao3" style="width:10.5%;height:40px;line-height:40px">维生素B2</div>
        </div>
        <div  v-for="(item,index) in diet" :key="index">
          <div style="display:flex;">
              <div class="biao2" style="width:16%;height:40px;line-height:40px">{{item.food_name}}</div>
            <div class="biao2" style="width:10.5%;height:40px;line-height:40px">{{item.vitamin_c ?  Math.floor(item.vitamin_c * 100) / 100  : 0}}</div>
            <div class="biao2" style="width:10.5%;height:40px;line-height:40px">{{item.protein ?  Math.floor(item.protein * 100) / 100 : 0}}</div>
            <div class="biao2" style="width:10.5%;height:40px;line-height:40px">{{item.carbohydrate ?  Math.floor(item.carbohydrate * 100) / 100 : 0}}</div>
            <div class="biao2" style="width:10.5%;height:40px;line-height:40px">{{item.sodium ?  Math.floor(item.sodium * 100) / 100 :0}}</div>
            <div class="biao2" style="width:10.5%;height:40px;line-height:40px">{{item.iron ? Math.floor(item.iron * 100) / 100 :0}}</div>
            <div class="biao2" style="width:10.5%;height:40px;line-height:40px">{{item.selenium ?  Math.floor(item.selenium * 100) / 100  :0}}</div>
            <div class="biao2" style="width:10.5%;height:40px;line-height:40px">{{item.vitamin_e ?  Math.floor(item.vitamin_e * 100) / 100  :0}}</div>
            <div class="biao2" style="width:10.5%;height:40px;line-height:40px">{{item.vitamin_b2 ? Math.floor(item.vitamin_b2 * 100) / 100 : 0}}</div>
          </div>
        </div>
      </div> -->


      <!-- 能量&营养摄入量分析 -->
      <div style="width: 100%;height: 40px; background-color: #2ab28b;display: flex;page-break-before:always;">
        <div><img src="../../assets/img/17.jpg" style="height: 40px" alt="" /></div>
        <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
          能量&营养摄入量分析
        </div>
      </div>
      <div style="width:98%;border:2px solid #2ab28b;margin-top:20px;margin-left:10px;">
        <div style="display:flex">
          <div class="biao1"
            style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;">能量</div>
          <div class="biao4" style="width:90%;padding-left: 5px;">
            <div v-html="energys">
            </div>
          </div>
        </div>
        <div style="display:flex;">
          <div class="biao1"
            style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;">蛋白质</div>
          <div class="biao4" style="width:90%;padding-left: 5px;">
            <div v-html="proteins">
            </div>
          </div>
        </div>
        <div style="display:flex">
          <div class="biao1"
            style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;">脂肪</div>
          <div class="biao4" style="width:90%;padding-left: 5px;">
            <div v-html="fats">
            </div>
          </div>
        </div>
        <div style="display:flex">
          <div class="biao1"
            style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;"> 碳水化合物
          </div>
          <div class="biao4" style="width:90%;padding-left: 5px;">
            <div v-html="carbohydrates">
            </div>
          </div>
        </div>
        <div style="display:flex">
          <div class="biao1"
            style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;">钙</div>
          <div class="biao4" style="width:90%;padding-left: 5px;">
            <div v-html="calciums">
            </div>
          </div>
        </div>
        <div style="display:flex">
          <div class="biao1"
            style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;"> 钠</div>
          <div class="biao4" style="width:90%;padding-left: 5px;">
            <div v-html="sodiums">
            </div>
          </div>
        </div>
        <div style="display:flex">
          <div class="biao1"
            style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;"> 镁</div>
          <div class="biao4" style="width:90%;padding-left: 5px;">
            <div v-html="magnesiums">
            </div>
          </div>
        </div>
        <div style="display:flex">
          <div class="biao1"
            style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;"> 铁</div>
          <div class="biao4" style="width:90%;padding-left: 5px;">
            <div v-html="irons">
            </div>
          </div>
        </div>
        <div style="display:flex">
          <div class="biao1"
            style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;"> 锌</div>
          <div class="biao4" style="width:90%;padding-left: 5px;">
            <div v-html="zincs">
            </div>
          </div>
        </div>
        <div style="display:flex">
          <div class="biao1"
            style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;"> 硒</div>
          <div class="biao4" style="width:90%;padding-left: 5px;">
            <div v-html="seleniums">
            </div>
          </div>
        </div>
        <div style="display:flex;">
          <div class="biao1"
            style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;"> 维生素A
          </div>
          <div class="biao4" style="width:90%;padding-left: 5px;">
            <div v-html="vitamin_as">
            </div>
          </div>
        </div>
        <div style="display:flex">
          <div class="biao1"
            style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;"> 维生素E
          </div>
          <div class="biao4" style="width:90%;padding-left: 5px;">
            <div v-html="vitamin_es">
            </div>
          </div>
        </div>
        <div style="display:flex">
          <div class="biao1"
            style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;"> 维生素B1
          </div>
          <div class="biao4" style="width:90%;padding-left: 5px;">
            <div v-html="vitamin_b1s">
            </div>
          </div>
        </div>
        <div style="display:flex">
          <div class="biao1"
            style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;"> 维生素B2
          </div>
          <div class="biao7" style="width:90%;padding-left: 5px;">
            <div v-html="vitamin_b2s">
            </div>
          </div>
        </div>
        <div style="display:flex">
          <div class="biao5"
            style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;"> 维生素C
          </div>
          <div class="biao7" style="width:90%;padding-left: 5px;">
            <div v-html="vitamin_cs">
            </div>
          </div>
        </div>
      </div>
      <div style="width: 100%; height: 40px; background-color: #2AB28B; margin-top: 10px; display: flex;page-break-before:always;">
          <div><img src="../../assets/img/12.jpg" style="height: 40px" alt="" /></div>
          <div style="font-size: 20px; margin-left: 10px; line-height: 40px; color: #fff;">儿童进食行为认知报告解析</div>
        </div>
      <!-- 行为认知报告解析 -->
      <div style="width:97%;border:2px solid #2ab28b;padding: 10px 10px;margin-top:10px;">
        <div style="font-size:20px;font-weight: bold;color:red;margin-bottom: 10px;margin-top: 10px;">
                *如对以下任何一种食物有过敏者慎用或禁用：(鸡蛋、牛奶、花生、大豆、大麦、小麦、坚果、鱼、虾)
              </div>
    <div style="padding-top: 5px ;padding-left: 5px;">
      {{letEnergy.energy<letEnergy.start?'能量不足：多食用富含蛋白质、维生素的食物，如鸡蛋、牛奶、瘦肉、西红柿、胡萝卜等、少食用含糖量高的食物、多饮水':letEnergy.energy>letEnergy.end?'能量超标：避免过多摄入高热量食物。减少高热量、高脂肪和高糖食物的摄入，特别是炸鸡、薯片、糖果等零食':''}}
    </div>
    <div style="padding-top: 5px ;padding-left: 5px;">
      {{protein.energy<protein.start?'蛋白质不足：多吃富含蛋白质的食物，如鸡肉、牛肉、鱼、虾、鸡蛋、豆类、牛奶、芝士等':protein.energy>protein.end?'蛋白质超标：减少高蛋白食物的摄入，如鸡蛋、牛奶、瘦肉等，避免摄入过多蛋白质':''}}
    </div>
    <div style="padding-top: 5px ;padding-left: 5px;">
      {{fat.energy<fat.start?'脂肪不足：多吃富含脂肪的食物如肉类、蛋类、奶制品、豆类等':fat.energy>fat.end?'脂肪超标：减少高脂肪食物的摄入，特别是饱和脂肪和反式脂肪。饱和脂肪主要存在于动物性食品中，如肥肉、全脂奶制品和某些热带植物油':''}}
    </div>
    <div style="padding-top: 5px ;padding-left: 5px;">
      {{carbohydrate.energy<carbohydrate.start?'碳水化合物不足：多吃谷类食物如水稻、小麦、玉米、大麦、燕麦、高粱等':carbohydrate.energy>carbohydrate.end?'碳水化合物超标：减少高碳水化合物食物的摄入，特别是精制糖、白面、白米等简单碳水化合物':''}}
    </div>
    <div style="padding-top: 5px ;padding-left: 5px;">
      {{calcium.energy<calcium.start?'钙不足：多吃乳制品如牛奶、酸奶、奶酪等、多吃豆制品如豆浆、豆腐、豆腐皮、豆腐干等':calcium.energy>calcium.end?'钙超标：减少高钙食物的摄入，特别是那些富含钙的乳制品（如牛奶、奶酪、酸奶）、豆制品（如豆腐、豆浆）、小鱼干和深绿色蔬菜（如菠菜、芥蓝）等':''}}
    </div>
    <div style="padding-top: 5px ;padding-left: 5px;">
      {{sodium.energy<sodium.start?'钠不足：适量吃盐、多吃富含钠的食物如海带、紫菜、芹菜、鱼类等':sodium.energy>sodium.end?'钠超标：避免摄入高盐食品，如腌制食品、加工肉类、罐头食品等':''}}
    </div>
    <div style="padding-top: 5px ;padding-left: 5px;">
      {{magnesium.energy<magnesium.start?'镁不足：多吃谷类、豆类、海鲜类等富含镁的食物如小麦、小米、玉米、大麦、荞麦、麦芽、荞麦面、高粱面、花生、豆类、螃蟹、龙虾等、适当食用富镁蔬如番茄、海带、紫菜等':magnesium.energy>magnesium.end?'镁超标：减少富含镁的食物的摄入，如坚果、全谷类、深色绿叶蔬菜以及海产品等':''}}
    </div>
    <div style="padding-top: 5px ;padding-left: 5px;">
      {{iron.energy<iron.start?'铁不足：适量进食富含铁元素的食物如猪血、羊血、鸡血、鸡肝、猪肝等动物血制品、多吃富含维生素C的食物如柑橘类水果、果汁或蔬菜汁（泥），可促进膳食铁的吸收':iron.energy>iron.end?'铁超标：减少或避免摄入富含铁的食物，如红肉、肝脏、蛋黄等':''}}
    </div>
    <div style="padding-top: 5px ;padding-left: 5px;">
      {{zinc.energy<zinc.start?'锌不足：多吃含锌高的食物如海产品（牡蛎、扇贝）、动物肝脏、蛋类、花生、核桃等':zinc.energy>zinc.end?'锌超标：减少富含锌的食物摄入，如红肉、贝类及坚果等':''}}
    </div>
    <div style="padding-top: 5px ;padding-left: 5px;">
      {{selenium.energy<selenium.start?'硒不足：多吃富含硒元素的食物如海产品（牡蛎、扇贝）、动物内脏（猪肝、鸡肝）、蛋类（鸡蛋、鸭蛋）、奶制品等':selenium.energy>selenium.end?'硒超标：应减少或避免摄入富含硒的食物，如海鲜、内脏、蘑菇等':''}}
    </div>
    <div style="padding-top: 5px ;padding-left: 5px;">
      {{vitamin_a.energy<vitamin_a.start?'维生素A不足：多吃富含维生素A的食物如胡萝卜、黄绿蔬菜、蛋类、黄色水果、菠菜、豌豆苗、红心甜薯、青椒、鱼肝油、牛奶等':vitamin_a.energy>vitamin_a.end?'维生素A超标：避免继续摄入高维生素A含量的食物或药物，如动物肝脏、鱼肝油等':''}}
    </div>
    <div style="padding-top: 5px ;padding-left: 5px;">
      {{vitamin_e.energy<vitamin_e.start?'维生素E不足：多吃富含维生素E的食物如绿色植物（生菜、菠菜、西兰花等）、坚果（核桃、杏仁、榛子等）、谷物（小麦胚芽、糙米等）、蛋黄等':vitamin_e.energy>vitamin_e.end?'维生素E超标：减少富含维生素E的食物摄入，如坚果、植物油、绿叶蔬菜等':''}}
    </div>
    <div style="padding-top: 5px ;padding-left: 5px;">
      {{vitamin_b1.energy<vitamin_b1.start?'维生素B1不足：多吃富含维生素B1的食物瘦猪肉、洋火腿、牡蛎、牛肉、牛奶、蛋、猪肝、鸡肉、鳗鱼、绿豆、芦笋、玉米、马铃薯、花椰菜、胚芽米、菠菜、芹菜、橘子、番茄等':vitamin_b1.energy>vitamin_b1.end?'维生素B1超标：减少富含维生素B1的食物的摄入量，如瘦肉、坚果、豆类、鱼类等':''}}
    </div>
    <div style="padding-top: 5px ;padding-left: 5px;">
      {{vitamin_b2.energy<vitamin_b2.start?'维生素B2不足：多吃奶制品与豆制品、动物肝脏、蔬菜、水果、鸡蛋':vitamin_b2.energy>vitamin_b2.end?'维生素B2超标：减少摄入富含维生素B2的食物，特别是黄色和橙色的食物，如胡萝卜、橙子、柚子等':''}}
    </div>
    <div style="padding-top: 5px ;padding-left: 5px;">
      {{vitamin_c.energy<vitamin_c.start?'维生素C不足：水果类：柿子、草莓、番茄、荔枝、樱桃、桃子、柚子、枇杷等。蔬菜类：苦瓜、南瓜、莴笋、白菜、红萝卜、蘑菇、大蒜、银耳、洋葱、红薯等':vitamin_c.energy>vitamin_c.end?'维生素C超标：减少食用富含维生素C的食物、增加水分摄入、避免阳光直射':''}}
    </div>
  </div>
  <!-- 医师签名和报告日期 -->
         <div style="width: 30%;height: 40px;border: 2px solid #09a578;margin-top: 20px;margin-bottom: 20px;display: flex;">
            <div
              style=" width: 42%;line-height: 40px;background-color: rgb(42, 178, 139);color:#fff;height: 100%;text-align: center;border-right: 2px solid #09a578;">
              主治医师
            </div>
            <div style="width: 58%;height: 100%;line-height: 40px;text-align: center;">{{Doctor}}</div>
          </div>
          <div style="width: 30%;height: 40px;border: 2px solid #09a578;margin-top: 20px;margin-bottom: 20px;display: flex;">
            <div
              style=" width: 42%;line-height: 40px;background-color: rgb(42, 178, 139);color:#fff;height: 100%;text-align: center;border-right: 2px solid #09a578;">
              检测护士
            </div>
            <div style="width: 58%;height: 100%;line-height: 40px;text-align: center;">{{Doctor1}}</div>
          </div>
           <div style="width: 30%;height: 40px;border: 2px solid #09a578;margin-top: 20px;margin-bottom: 20px;display: flex;">
            <div
              style=" width: 42%;line-height: 40px;background-color: rgb(42, 178, 139);color:#fff;height: 100%;text-align: center;border-right: 2px solid #09a578;">
              报告日期
            </div>
            <div style="width: 58%;height: 100%;line-height: 40px;text-align: center;">{{report_time}}</div>
          </div>

      <!-- 膳食结构分析(日均值) -->
      <div  v-if="code_1=='true'" style="margin-top: 20px;height:200px;text-align: end;margin-right: 50px;margin-bottom: 10px;">
          <img style="width: 150px;height:150px;" :src="'http://' + baseUrl + '/' +codeimg" alt="">
          <div style="margin-top:10px;font-size: 20px;font-weight: bold;">
            扫码关注公众号,获取在线报告
          </div>
      </div>
    </div>
</template>


<script setup>
import { defineComponent, onMounted, ref, watch } from 'vue';
import { ElMessage } from "element-plus";
import * as api from "../../api/loginHttp";
import http, { baseUrl } from "../../utils/http";
import { useRoute, useRouter } from "vue-router"
import PrintJS from 'print-js'
import ChildViewDietary from '../common/ChildViewdietarys1.vue';
import * as echarts from 'echarts'

const router = useRouter()
const energys = ref({})
const route = useRoute()
const labName = ref()
const code_1 = ref(false)
const groupId = ref()
const fats = ref({})
const BMIs=ref()
const carbohydrates = ref({})
const calciums = ref({})
const sodiums = ref({})
const magnesiums = ref({})
const codeimg=ref()
const irons = ref({})
const zincs = ref({})
const seleniums = ref({})
const intake = ref({})
const vitamin_as = ref({})
const vitamin_es = ref({})
const vitamin_b1s = ref({})
const vitamin_b2s = ref({})
const vitamin_cs = ref({})
const proteins = ref({})
const reportId = ref()
const id = ref()
const early_intervention = ref({})
const Monitoring_content = ref({})
const high_contents = ref({})
const contents = ref({})
const pagoda = ref({})
const principle = ref({})
const diet = ref({})
const Titlename = ref()
const username = ref()
const guardian = ref()
const birthStatus = ref()
const births=ref()
const birth = ref()
const imgUrl = ref()
const form = ref({
  elText: '',
  elTextTwo: '',
  elTextThree: '',
})

const letEnergy = ref({ 'energy': 0, 'start': 0, 'end': 0 })
const protein = ref({ 'energy': 0, 'start': 0, 'end': 0 })
const fat = ref({ 'energy': 0, 'start': 0, 'end': 0 })
const carbohydrate = ref({ 'energy': 0, 'start': 0, 'end': 0 })
const calcium = ref({ 'energy': 0, 'start': 0, 'end': 0 })
const sodium = ref({ 'energy': 0, 'start': 0, 'end': 0 })
const magnesium = ref({ 'energy': 0, 'start': 0, 'end': 0 })
const iron = ref({ 'energy': 0, 'start': 0, 'end': 0 })
const zinc = ref({ 'energy': 0, 'start': 0, 'end': 0 })
const selenium = ref({ 'energy': 0, 'start': 0, 'end': 0 })
const vitamin_a = ref({ 'energy': 0, 'start': 0, 'end': 0 })
const vitamin_e = ref({ 'energy': 0, 'start': 0, 'end': 0 })
const vitamin_b1 = ref({ 'energy': 0, 'start': 0, 'end': 0 })
const vitamin_b2 = ref({ 'energy': 0, 'start': 0, 'end': 0 })
const vitamin_c = ref({ 'energy': 0, 'start': 0, 'end': 0 })
const diet_analysis = ref({})
const hospital_name = ref()
const times=ref()
const report_time = ref()
const data = ref()
const Doctor=ref()
const Doctor1=ref()
const onHome = async () => {
  await router.push({ 'path': '/Home' })
}
const kcalType = ref(2)


const fetchData = async () => {

  Titlename.value = localStorage.getItem('Title');
  setTimeout(() => {
    print('print-all')
  }, 4000)
  if (route.params.groupId) {
    groupId.value = route.params.groupId
    id.value = route.params.id
    reportId.value = route.params.reportId

    username.value = route.params.username
    guardian.value = route.params.guardian
    birthStatus.value = route.params.birth
    codeimg.value=window.localStorage.getItem('ercode')
    if (groupId.value === 3) {
      labName.value = '婴幼儿营养测评'
    } else if (groupId.value === 5) {
      labName.value = '孕产妇营养测评'
    } else if (groupId.value === 6) {
      labName.value = '成年人营养测评'
    } else if (groupId.value === 7) {
      labName.value = '慢性病营养测评'
    } else {
      labName.value = '婴幼儿营养测评'
    }

    //获取二维码是否显示
  http.get('api/index/getAuth').then((res)=>{
      let aray=res.data.data;
      let array=aray.split(',');
      if(array.includes('12')){
        code_1.value='true'
      }else{
        code_1.value='false'
      }
    })

    //获取用户年龄
  http.get("api/archives/evaluating?id=" + id.value ).then((res) => {
      births.value=res.data.data.birth;
  });

    http.get('api/archives/viewReportMember?id=' + reportId.value + '&username=' + username.value + '&guardian=' + guardian.value + '&birth=' + birthStatus.value).then((res) => {
      if(res.data.data.times){
      let  parsedDate = new Date(res.data.data.times);
      let  targetDateObj = new Date('2024-01-08');
      if (parsedDate < targetDateObj) {
       times.value=1;
      } else if (parsedDate > targetDateObj) {
        times.value=2;
      } 
    }
     
      if (res.data.code === 0) {
        ElMessage.error(res.data.msg)
      }
      BMIs.value=res.data.data.bmi;
      Doctor.value=res.data.data.contents.doctor;
      Doctor1.value=res.data.data.contents.doctor1;
      report_time.value = res.data.data.times;
      contents.value = res.data.data.contents;
      birth.value = res.data.data.contents.birth;


      if (res.data.data.feed_advice != '' && res.data.data.feed_advice != null) {
        form.value.elText = res.data.data.feed_advice;
      } else {
        form.value.elText = '当膳食方案中有食谱或食材不符合您的膳食习惯时，请先与医生确认，若医生认为某些食材对儿童的膳食营养改善很重要，要求不能置换或最好不要置换；其他类可进行同类食材替换，例如：猪肉、牛肉、羊肉之间可互换，鸡肉、鸭肉、鱼类之间可互换，蔬菜间可互换，米面间可互换，但要注意不要更改食材用量。\n' +
          '给儿童烹调食物时，宜尽可能保持食物的原味，口味以清淡为宜，少放调料。\n' +
          '每天应当进行至少1小时的户外游戏或运动，每天看电视、玩平板电脑的累计时间不超过2小时，日常生活中还可适当增加一些有氧活动例如：自行车、慢跑、跳绳、仰卧起坐、游泳等。';
      }

      if (res.data.data.nutrition_advice != '' && res.data.data.nutrition_advice != null) {
        form.value.elTextTwo = res.data.data.nutrition_advice;
      } else {
        form.value.elTextTwo = '这个阶段是饮食行为和生活方式形成的关键时期，7岁前的儿童生活自理能力不断提高，自主性、好奇心、学习能力和模仿能力增强，该时期也是培养良好饮食习惯的重要阶段。\n' +
          '家长要有意识的培养孩子规律就餐，每天的饮食种类应该包含谷、肉、蛋、菜、奶、水果，自主进食不挑食的饮食习惯。';
        if (contents._rawValue.hair_value != '' || contents._rawValue.oralCavity_value != '' || contents._rawValue.neck_value != '' || contents._rawValue.Neuropathy_value != '' || contents._rawValue.symptoms_value != '') {
          form.value.elTextTwo = '这个阶段是饮食行为和生活方式形成的关键时期，7岁前的儿童生活自理能力不断提高，自主性、好奇心、学习能力和模仿能力增强，该时期也是培养良好饮食习惯的重要阶段。\n' +
            '家长要有意识的培养孩子规律就餐，每天的饮食种类应该包含谷、肉、蛋、菜、奶、水果，自主进食不挑食的饮食习惯。';
        } else if (contents._rawValue.eye_value != '') {
          form.value.elTextTwo = '平衡膳食，多摄入动物肝、肾、奶、蛋和深绿或红黄蔬菜、水果等富维生素A和β胡萝卜素食物。婴儿要及时添加含动物肝等辅食，没有母乳的婴儿需配方奶喂养。生后及时按预防量补充维生素A。幼儿膳食中要注意脂肪和含维生素A和β胡萝卜素食物搭配食用。患消化系统疾病及消耗性疾病的患儿需及时补充维生素A制剂。\n' +
            '长期摄入不足是导致维生素A缺乏的主要原因，儿童维生素A的主要来自1、肝脏、鱼油、奶制品、鸡蛋等动物性食物；2、绿叶蔬菜以及黄色或橙色的水果和蔬菜中富含各种胡罗卜素，可在体内转变为维生素A。对于人体来说，动物性食物中的VA要比植物性中的VA更容易吸收。';
        } else if (contents._rawValue.skin_value != '') {
          form.value.elTextTwo = '谷类、硬果、动物内脏、蛋类及酵母中维生素B1含量丰富，但需要注意谷类加工过度可损失维生素B1，以及生鱼和贝类含有破坏维生素B1的酶，所以在日常饮食中不长期食用精米、生鱼和贝类。还需要注意的是维生素B1易溶于水，在碱性条件下易受热破坏，所以过分淘米或烹调中加碱也可导致维生素B1大量损失。\n' +
            '富含维生素B2的食物主要是动物肝脏（如肝、肾、心）等、蛋黄和乳类。谷类的精细加工会导致所含的维生素B2流失，所以儿童日常饮食中还需要增加粗粮的比例以及保证每日鸡蛋和牛奶的摄入。';
        } else if (contents._rawValue.sign_value != '') {
          form.value.elTextTwo = '足量的食物，平衡膳食，规律就餐，不偏食不挑食，每天饮奶多喝水，避免含糖饮料，是保障儿童生长发育的关键。日常生活中选择健康有营养的零食，避免含糖饮料和高脂肪的油炸食物，导致儿童正餐不按量食用。\n' +
            '营养不良的儿童，要在保证能量摄入充足的基础上，增加鱼、禽、蛋、瘦肉、豆制品等富含优质蛋白质的食物的摄入，经常使用奶及奶制品，每天吃新鲜的蔬菜水果；保证一日三餐，纠正偏食和过度节食等不健康饮食行为，并保持适宜的身体活动。';
        } else if (contents._rawValue.sign_value != '') {
          form.value.elTextTwo = '奶和奶制品是儿童钙的主要来源，也是最佳来源。绿色蔬菜、大豆及其制品特殊含有较高的钙，可作为补充来源。 需要特别注意的是钙在体内主动吸收需要维生素D，维生素D缺乏或不足时，钙主动吸收下降间接造成改缺乏。此外，运动锻炼也是骨骼健康的重要决定因素，跑、跳等中等程度的运动有利于骨骼钙沉积，达到更高的估量峰值。'
        }
      }

      form.value.elTextThree = res.data.data.doctor_advice;

    })

    imgUrl.value = "http://" + baseUrl + '/';

    let params = {
      'groupId': groupId.value,
      'id': id.value,
      'reportId': reportId.value,

      'username': username.value,
      'guardian': guardian.value,
      'birth': birthStatus.value,
    }
    const data = await api.energy(params);

    if (data.data.code == 0) {
      ElMessage.error(data.data.msg)
      await router.push({ 'path': '/Evaluation/' + groupId.value + '/' + id })
    }

    if (!data.data.data.diet_analysis) {
      ElMessage.error(data.data.msg)
      await router.push({ 'path': '/Evaluation/' + groupId.value + '/' + id })
    }
    for (let i = 0; i < data.data.data.diet_analysis.length; i++) {
      switch (i) {
        case 0:
          data.data.data.diet_analysis[i]['pName'] = '周一';
          break
        case 1:
          data.data.data.diet_analysis[i]['pName'] = '周二';
          break
        case 2:
          data.data.data.diet_analysis[i]['pName'] = '周三';
          break
        case 3:
          data.data.data.diet_analysis[i]['pName'] = '周四';
          break
        case 4:
          data.data.data.diet_analysis[i]['pName'] = '周五';
          break
        case 5:
          data.data.data.diet_analysis[i]['pName'] = '周六';
          break
        case 6:
          data.data.data.diet_analysis[i]['pName'] = '周日';
          break
      }
    }


    diet_analysis.value = data.data.data.diet_analysis;

    for (let i = 0; i < data.data.data.diet.length; i++) {
      letEnergy._value.energy = letEnergy._value.energy + parseInt(data.data.data.diet[i]['energy']);
      protein._value.energy = protein._value.energy + parseInt(data.data.data.diet[i]['protein']);
      fat._value.energy = fat._value.energy + parseInt(data.data.data.diet[i]['fat']);
      carbohydrate._value.energy = carbohydrate._value.energy + parseInt(data.data.data.diet[i]['carbohydrate']);
      calcium._value.energy = calcium._value.energy + parseInt(data.data.data.diet[i]['calcium']);
      sodium._value.energy = sodium._value.energy + parseInt(data.data.data.diet[i]['sodium']);
      magnesium._value.energy = magnesium._value.energy + parseInt(data.data.data.diet[i]['magnesium']);
      iron._value.energy = iron._value.energy + parseInt(data.data.data.diet[i]['iron']);
      zinc._value.energy = zinc._value.energy + parseInt(data.data.data.diet[i]['zinc']);
      selenium._value.energy = selenium._value.energy + parseInt(data.data.data.diet[i]['selenium']);
      vitamin_a._value.energy = vitamin_a._value.energy + parseInt(data.data.data.diet[i]['vitamin_a']);
      vitamin_e._value.energy = vitamin_e._value.energy + parseInt(data.data.data.diet[i]['vitamin_e']);
      vitamin_b1._value.energy = vitamin_b1._value.energy + parseInt(data.data.data.diet[i]['vitamin_b1']);
      vitamin_b2._value.energy = vitamin_b2._value.energy + parseInt(data.data.data.diet[i]['vitamin_b2']);
      vitamin_c._value.energy = vitamin_c._value.energy + parseInt(data.data.data.diet[i]['vitamin_c']);
    }



    letEnergy._value.start = data.data.data.packAge[0].start_package;
    letEnergy._value.end = data.data.data.packAge[0].end_package;
    letEnergy._value.keyword = '✔ 正常';
    letEnergy._value.color = 'everyBlack';




    protein._value.start = data.data.data.packAge[1].start_package;
    protein._value.end = data.data.data.packAge[1].end_package;
    protein._value.keyword = '✔ 正常';
    protein._value.color = 'everyBlack';
    if (protein._value.energy < protein._value.start) {
      protein._value.keyword = '▼ 不足';
      protein._value.color = 'everyRed';
    } else if (protein._value.energy > protein._value.end) {
      protein._value.keyword = '▲ 超标';
      protein._value.color = 'everyOrange';
    }

    fat._value.start = data.data.data.packAge[2].start_package;
    fat._value.end = data.data.data.packAge[2].end_package;
    fat._value.keyword = '✔ 正常';
    fat._value.color = 'everyBlack';
    if (fat._value.energy < fat._value.start) {
      fat._value.keyword = '▼ 不足';
      fat._value.color = 'everyRed';
    } else if (fat._value.energy > fat._value.end) {
      fat._value.keyword = '▲ 超标';
      fat._value.color = 'everyOrange';
    }

    carbohydrate._value.start = data.data.data.packAge[3].start_package;
    carbohydrate._value.end = data.data.data.packAge[3].end_package;
    carbohydrate._value.keyword = '✔ 正常';
    carbohydrate._value.color = 'everyBlack';
    if (carbohydrate._value.energy < carbohydrate._value.start) {
      carbohydrate._value.keyword = '▼ 不足';
      carbohydrate._value.color = 'everyRed';
    } else if (carbohydrate._value.energy > carbohydrate._value.end) {
      carbohydrate._value.keyword = '▲ 超标';
      carbohydrate._value.color = 'everyOrange';
    }

    calcium._value.start = data.data.data.packAge[4].start_package;
    calcium._value.end = data.data.data.packAge[4].end_package;
    calcium._value.keyword = '✔ 正常';
    calcium._value.color = 'everyBlack';
    if (calcium._value.energy < calcium._value.start) {
      calcium._value.keyword = '▼ 不足';
      calcium._value.color = 'everyRed';
    } else if (calcium._value.energy > calcium._value.end) {
      calcium._value.keyword = '▲ 超标';
      calcium._value.color = 'everyOrange';
    }

    sodium._value.start = data.data.data.packAge[5].start_package;
    sodium._value.end = data.data.data.packAge[5].end_package;
    sodium._value.keyword = '✔ 正常';
    sodium._value.color = 'everyBlack';
    if (sodium._value.energy < sodium._value.start) {
      sodium._value.keyword = '▼ 不足';
      sodium._value.color = 'everyRed';
    } else if (sodium._value.energy > sodium._value.end) {
      sodium._value.keyword = '▲ 超标';
      sodium._value.color = 'everyOrange';
    }

    magnesium._value.start = data.data.data.packAge[6].start_package;
    magnesium._value.end = data.data.data.packAge[6].end_package;
    magnesium._value.keyword = '✔ 正常';
    magnesium._value.color = 'everyBlack';
    if (magnesium._value.energy < magnesium._value.start) {
      magnesium._value.keyword = '▼ 不足';
      magnesium._value.color = 'everyRed';
    } else if (magnesium._value.energy > magnesium._value.end) {
      magnesium._value.keyword = '▲ 超标';
      magnesium._value.color = 'everyOrange';
    }

    iron._value.start = data.data.data.packAge[7].start_package;
    iron._value.end = data.data.data.packAge[7].end_package;
    iron._value.keyword = '✔ 正常';
    iron._value.color = 'everyBlack';
    if (iron._value.energy < iron._value.start) {
      iron._value.keyword = '▼ 不足';
      iron._value.color = 'everyRed';
    } else if (iron._value.energy > iron._value.end) {
      iron._value.keyword = '▲ 超标';
      iron._value.color = 'everyOrange';
    }

    zinc._value.start = data.data.data.packAge[8].start_package;
    zinc._value.end = data.data.data.packAge[8].end_package;
    zinc._value.keyword = '✔ 正常';
    zinc._value.color = 'everyBlack';
    if (zinc._value.energy < zinc._value.start) {
      zinc._value.keyword = '▼ 不足';
      zinc._value.color = 'everyRed';
    } else if (zinc._value.energy > zinc._value.end) {
      zinc._value.keyword = '▲ 超标';
      zinc._value.color = 'everyOrange';
    }

    selenium._value.start = data.data.data.packAge[9].start_package;
    selenium._value.end = data.data.data.packAge[9].end_package;
    selenium._value.keyword = '✔ 正常';
    selenium._value.color = 'everyBlack';
    if (selenium._value.energy < selenium._value.start) {
      selenium._value.keyword = '▼ 不足';
      selenium._value.color = 'everyRed';
    } else if (selenium._value.energy > selenium._value.end) {
      selenium._value.keyword = '▲ 超标';
      selenium._value.color = 'everyOrange';
    }

    vitamin_a._value.start = data.data.data.packAge[10].start_package;
    vitamin_a._value.end = data.data.data.packAge[10].end_package;
    vitamin_a._value.keyword = '✔ 正常';
    vitamin_a._value.color = 'everyBlack';
    if (vitamin_a._value.energy < vitamin_a._value.start) {
      vitamin_a._value.keyword = '▼ 不足';
      vitamin_a._value.color = 'everyRed';
    } else if (vitamin_a._value.energy > vitamin_a._value.end) {
      vitamin_a._value.keyword = '▲ 超标';
      vitamin_a._value.color = 'everyOrange';
    }

    vitamin_e._value.start = data.data.data.packAge[11].start_package;
    vitamin_e._value.end = data.data.data.packAge[11].end_package;
    vitamin_e._value.keyword = '✔ 正常';
    vitamin_e._value.color = 'everyBlack';
    if (vitamin_e._value.energy < vitamin_e._value.start) {
      vitamin_e._value.keyword = '▼ 不足';
      vitamin_e._value.color = 'everyRed';
    } else if (vitamin_e._value.energy > vitamin_e._value.end) {
      vitamin_e._value.keyword = '▲ 超标';
      vitamin_e._value.color = 'everyOrange';
    }

    vitamin_b1._value.start = data.data.data.packAge[12].start_package;
    vitamin_b1._value.end = data.data.data.packAge[12].end_package;
    vitamin_b1._value.keyword = '✔ 正常';
    vitamin_b1._value.color = 'everyBlack';
    if (vitamin_b1._value.energy < vitamin_b1._value.start) {
      vitamin_b1._value.keyword = '▼ 不足';
      vitamin_b1._value.color = 'everyRed';
    } else if (vitamin_b1._value.energy > vitamin_b1._value.end) {
      vitamin_b1._value.keyword = '▲ 超标';
      vitamin_b1._value.color = 'everyOrange';
    }

    vitamin_b2._value.start = data.data.data.packAge[13].start_package;
    vitamin_b2._value.end = data.data.data.packAge[13].end_package;
    vitamin_b2._value.keyword = '✔ 正常';
    vitamin_b2._value.color = 'everyBlack';
    if (vitamin_b2._value.energy < vitamin_b2._value.start) {
      vitamin_b2._value.keyword = '▼ 不足';
      vitamin_b2._value.color = 'everyRed';
    } else if (vitamin_b2._value.energy > vitamin_b2._value.end) {
      vitamin_b2._value.keyword = '▲ 超标';
      vitamin_b2._value.color = 'everyOrange';
    }

    vitamin_c._value.start = data.data.data.packAge[14].start_package;
    vitamin_c._value.end = data.data.data.packAge[14].end_package;
    vitamin_c._value.keyword = '✔ 正常';
    vitamin_c._value.color = 'everyBlack';
    if (vitamin_c._value.energy < vitamin_c._value.start) {
      vitamin_c._value.keyword = '▼ 不足';
      vitamin_c._value.color = 'everyRed';
    } else if (vitamin_c._value.energy > vitamin_c._value.end) {
      vitamin_c
      vitamin_c._value.keyword = '▲ 超标';
      vitamin_c._value.color = 'everyOrange';
    }



  } else {
    ElMessage.error('栏目编号不得为空')
    await router.push({ 'path': '/Home' })
  }
}
const pageList = async () => {
  await router.push({ 'path': '/pageList/' + groupId.value })
}
onMounted(() => {
  fetchData()
})

onMounted(() => { // 需要获取到element,所以是onMounted的Hook
  http.get('api/archives/viewreport?id=' + reportId.value + '&username=' + username.value + '&guardian=' + guardian.value + '&birth=' + birthStatus.value).then((res) => {


    data.value = res.data.data;
    diet.value = res.data.data.diet;
    pagoda.value = res.data.data.pagoda;
    if(res.data.data.contents.water){
      pagoda.value[0].product_energy=parseFloat(res.data.data.contents.water);
    }
    // 能量

    // if ( letEnergy._value.energy < letEnergy._value.start) {
    //   energys.value = data.value.foodmotion[2].content;
    //   letEnergy._value.keyword = '▼ 不足';
    //   letEnergy._value.color = 'everyRed';
    //   kcalType.value = 3
    // } else if( letEnergy._value.energy > letEnergy._value.end) {
    //   letEnergy._value.keyword = '▲ 超标';
    //   letEnergy._value.color = 'everyOrange';
    //   kcalType.value = 1
    // }
    if (letEnergy._value.energy < letEnergy._value.start) {
      principle.value = data.value.foodliving[2].content;
      energys.value = data.value.foodmotion[2].content;
      letEnergy._value.keyword = '▼ 不足';
      letEnergy._value.color = 'everyRed';
      kcalType.value = 3
    } else if (letEnergy._value.energy > letEnergy._value.end) {
      principle.value = data.value.foodliving[1].content;
      energys.value = data.value.foodmotion[0].content;
      letEnergy._value.keyword = '▲ 超标';
      letEnergy._value.color = 'everyOrange';
      kcalType.value = 1
    } else {
      principle.value = data.value.foodliving[0].content;
      energys.value = data.value.foodmotion[1].content;
    }
    //  蛋白质
    if (protein._value.energy < protein._value.start) {
      proteins.value = data.value.foodmotion[5].content;
      protein._value.keyword = '▼ 不足';
      protein._value.color = 'everyRed';
    } else if (protein._value.energy > protein._value.end) {
      proteins.value = data.value.foodmotion[3].content;
      protein._value.keyword = '▲ 超标';
      protein._value.color = 'everyOrange';
    } else {
      proteins.value = data.value.foodmotion[4].content;
    }
    //脂肪
    if (fat._value.energy < fat._value.start) {
      fats.value = data.value.foodmotion[8].content;
      fat._value.keyword = '▼ 不足';
      fat._value.color = 'everyRed';
    } else if (fat._value.energy > fat._value.end) {
      fats.value = data.value.foodmotion[6].content;
      fat._value.keyword = '▲ 超标';
      fat._value.color = 'everyOrange';
    } else {
      fats.value = data.value.foodmotion[7].content;
    }
    //碳水化合物
    if (carbohydrate._value.energy < carbohydrate._value.start) {
      carbohydrates.value = data.value.foodmotion[11].content;
      carbohydrate._value.keyword = '▼ 不足';
      carbohydrate._value.color = 'everyRed';
    } else if (carbohydrate._value.energy > carbohydrate._value.end) {
      carbohydrates.value = data.value.foodmotion[9].content;
      carbohydrate._value.keyword = '▲ 超标';
      carbohydrate._value.color = 'everyOrange';
    } else {
      carbohydrates.value = data.value.foodmotion[10].content;
    }
    //钙
    if (calcium._value.energy < calcium._value.start) {
      calciums.value = data.value.foodmotion[14].content;
      calcium._value.keyword = '▼ 不足';
      calcium._value.color = 'everyRed';
    } else if (calcium._value.energy > calcium._value.end) {
      calciums.value = data.value.foodmotion[12].content;
      calcium._value.keyword = '▲ 超标';
      calcium._value.color = 'everyOrange';
    } else {
      calciums.value = data.value.foodmotion[13].content;
    }
    //钠
    if (sodium._value.energy < sodium._value.start) {
      sodiums.value = data.value.foodmotion[17].content;
      sodium._value.keyword = '▼ 不足';
      sodium._value.color = 'everyRed';
    } else if (sodium._value.energy > sodium._value.end) {
      sodiums.value = data.value.foodmotion[15].content;
      sodium._value.keyword = '▲ 超标';
      sodium._value.color = 'everyOrange';
    } else {
      sodiums.value = data.value.foodmotion[16].content;
    }
    //镁
    if (magnesium._value.energy < magnesium._value.start) {
      magnesiums.value = data.value.foodmotion[20].content;
      magnesium._value.keyword = '▼ 不足';
      magnesium._value.color = 'everyRed';
    } else if (magnesium._value.energy > magnesium._value.end) {
      magnesiums.value = data.value.foodmotion[18].content;
      magnesium._value.keyword = '▲ 超标';
      magnesium._value.color = 'everyOrange';
    } else {
      magnesiums.value = data.value.foodmotion[19].content;
    }
    //铁
    if (iron._value.energy < iron._value.start) {
      irons.value = data.value.foodmotion[23].content;
      iron._value.keyword = '▼ 不足';
      iron._value.color = 'everyRed';
    } else if (iron._value.energy > iron._value.end) {
      irons.value = data.value.foodmotion[21].content;
      iron._value.keyword = '▲ 超标';
      iron._value.color = 'everyOrange';
    } else {
      irons.value = data.value.foodmotion[22].content;
    }
    //锌
    if (zinc._value.energy < zinc._value.start) {
      zincs.value = data.value.foodmotion[26].content;
      zinc._value.keyword = '▼ 不足';
      zinc._value.color = 'everyRed';
    } else if (zinc._value.energy > zinc._value.end) {
      zincs.value = data.value.foodmotion[24].content;
      zinc._value.keyword = '▲ 超标';
      zinc._value.color = 'everyOrange';
    } else {
      zincs.value = data.value.foodmotion[25].content;
    }
    //硒
    if (selenium._value.energy < selenium._value.start) {
      seleniums.value = data.value.foodmotion[29].content;
      selenium._value.keyword = '▼ 不足';
      selenium._value.color = 'everyRed';
    } else if (selenium._value.energy > selenium._value.end) {
      seleniums.value = data.value.foodmotion[27].content;
      selenium._value.keyword = '▲ 超标';
      selenium._value.color = 'everyOrange';
    } else {
      seleniums.value = data.value.foodmotion[28].content;
    }
    //维生素A
    if (vitamin_a._value.energy < vitamin_a._value.start) {
      vitamin_as.value = data.value.foodmotion[32].content;
      vitamin_a._value.keyword = '▼ 不足';
      vitamin_a._value.color = 'everyRed';
    } else if (vitamin_a._value.energy > vitamin_a._value.end) {
      vitamin_as.value = data.value.foodmotion[30].content;
      vitamin_a._value.keyword = '▲ 超标';
      vitamin_a._value.color = 'everyOrange';
    } else {
      vitamin_as.value = data.value.foodmotion[31].content;
    }
    //维生素E
    if (vitamin_e._value.energy < vitamin_e._value.start) {
      vitamin_es.value = data.value.foodmotion[35].content;
      vitamin_e._value.keyword = '▼ 不足';
      vitamin_e._value.color = 'everyRed';
    } else if (vitamin_e._value.energy > vitamin_e._value.end) {
      vitamin_es.value = data.value.foodmotion[33].content;
      vitamin_e._value.keyword = '▲ 超标';
      vitamin_e._value.color = 'everyOrange';
    } else {
      vitamin_es.value = data.value.foodmotion[34].content;
    }
    //维生素B1
    if (vitamin_b1._value.energy < vitamin_b1._value.start) {
      vitamin_b1s.value = data.value.foodmotion[38].content;
      vitamin_b1._value.keyword = '▼ 不足';
      vitamin_b1._value.color = 'everyRed';
    } else if (vitamin_b1._value.energy > vitamin_b1._value.end) {
      vitamin_b1s.value = data.value.foodmotion[36].content;
      vitamin_b1._value.keyword = '▲ 超标';
      vitamin_b1._value.color = 'everyOrange';
    } else {
      vitamin_b1s.value = data.value.foodmotion[37].content;
    }
    //维生素B2
    if (vitamin_b2._value.energy < vitamin_b2._value.start) {
      vitamin_b2s.value = data.value.foodmotion[41].content;
      vitamin_b2._value.keyword = '▼ 不足';
      vitamin_b2._value.color = 'everyRed';
    } else if (vitamin_b2._value.energy > vitamin_b2._value.end) {
      vitamin_b2s.value = data.value.foodmotion[39].content;
      vitamin_b2._value.keyword = '▲ 超标';
      vitamin_b2._value.color = 'everyOrange';
    } else {
      vitamin_b2s.value = data.value.foodmotion[40].content;
    }
    //维生素C
    if (vitamin_c._value.energy < vitamin_c._value.start) {
      vitamin_cs.value = data.value.foodmotion[44].content;
      vitamin_c._value.keyword = '▼ 不足';
      vitamin_c._value.color = 'everyRed';
    } else if (vitamin_c._value.energy > vitamin_c._value.end) {
      vitamin_cs.value = data.value.foodmotion[42].content;
      vitamin_c._value.keyword = '▲ 超标';
      vitamin_c._value.color = 'everyOrange';
    } else {
      vitamin_cs.value = data.value.foodmotion[43].content;
    }


    early_intervention.value = res.data.data.high_contents.intervention_one + res.data.data.high_contents.intervention_two + res.data.data.high_contents.intervention_three;
    Monitoring_content.value = res.data.data.high_contents.family_1 + res.data.data.high_contents.family_2 + res.data.data.high_contents.family_3 + res.data.data.high_contents.family_4 + res.data.data.high_contents.family_5 + res.data.data.high_contents.family_6 + res.data.data.high_contents.family_7 + res.data.data.high_contents.family_8 + res.data.data.high_contents.family_9 + res.data.data.high_contents.family_10 + res.data.data.high_contents.family_11 + res.data.data.high_contents.family_12 + res.data.data.high_contents.family_13
    high_contents.value = res.data.data.high_contents
    hospital_name.value = res.data.data.hospital_name


    // proposal.filter((ite,index)=>{
    //     return ite.food_product_id==pagoda.food_product_id

    // })

    // principle.value = res.data.data.foodliving
    intake.value = res.data.data.foodmotion
    early_intervention.value = res.data.data.high_contents.intervention_one + res.data.data.high_contents.intervention_two + res.data.data.high_contents.intervention_three;
    Monitoring_content.value = res.data.data.high_contents.family_1 + res.data.data.high_contents.family_2 + res.data.data.high_contents.family_3 + res.data.data.high_contents.family_4 + res.data.data.high_contents.family_5 + res.data.data.high_contents.family_6 + res.data.data.high_contents.family_7 + res.data.data.high_contents.family_8 + res.data.data.high_contents.family_9 + res.data.data.high_contents.family_10 + res.data.data.high_contents.family_11 + res.data.data.high_contents.family_12 + res.data.data.high_contents.family_13
    high_contents.value = res.data.data.high_contents
    hospital_name.value = res.data.data.hospital_name

    pagoda.value = res.data.data.pagoda

    let color = ["#3EA4AA"];
    let color1 = ["#D0443B", "#3EA4AA"];
    let color2 = ["#D0443B", "#3EA4AA"];
    let xAxisData = ["1", "2", "3", "4", "5", "6", "7"];
    var arr = [];
    var arr2 = [];
    var parr = res.data.data.contents.primaryHeight;
    for (let i = 0; i < parr.length; i++) {
      arr.push(parr[i].content);
      arr2.push(parr[i].month);
    }
    var arr1 = [];
    var arr3 = [];
    var parr1 = res.data.data.contents.primaryWeight;
    for (let i = 0; i < parr1.length; i++) {
      arr1.push(parr1[i].content);
      arr3.push(parr1[i].month);
    }

    var myChart = echarts.init(document.getElementById("myChart1"));
    myChart.value = myChart;
    myChart.setOption({
      backgroundColor: "#fff",
      color: color,
      legend: {
        top: 20
      },
      tooltip: {
        trigger: "axis",
        formatter: function () {
          return "";
        }
      },
      grid: {
        top: 100,
        containLabel: true
      },
      xAxis: [
        {
          name: "次数",
          type: "category",
          boundaryGap: false,
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#606266"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#E4E7ED"
            }
          },
          axisTick: {
            show: false // 刻度出来的尖尖
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: ["#E4E7ED"],
              width: 1,
              type: "solid"
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#DCDFE6" //坐标轴指示线
            },
            show: true //不坐标轴指示线
          },
          nameTextStyle: {
            color: "#606266",
            fontSize: 12,
            lineHeight: 40,
            padding: [0, 0, 0, -15]
          },
          data: xAxisData
        }
      ],
      yAxis: [
        {
          type: "value",
          name: "BMI值",
          axisLabel: {
            textStyle: {
              color: "#606266"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#E4E7ED"
            }
          },
          axisTick: {
            show: false // 刻度出来的尖尖
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#E4E7ED"],
              width: 1,
              type: "dotted"
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#DCDFE6" //坐标轴指示线
            },
            show: true //不坐标轴指示线
          },
          nameTextStyle: {
            color: "#606266",
            fontSize: 12,
            lineHeight: 40
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: [
                "rgba(83,148,208,0.15)",
                "rgba(103,194,58,0.15)",
                "rgba(226,203,80,0.15)",
                "rgba(226,115,80,0.15)"
              ]
            }
          }
        }
      ],
      series: [
        {
          name: "我的",
          type: "line",
          smooth: true,
          symbolSize: 8,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: color[1]
            }
          },
          symbol: "circle", //数据交叉点样式 (实心点)
          // itemStyle: {
          //     normal: {
          //         color: "#ffffff",
          //         borderColor: '#3EA4AA',
          //         borderWidth: 1,
          //     }
          // },
          data: res.data.data.contents.sumBmi
        }
      ]
    });
    window.addEventListener("resize", function () {
      myChart.resize();
    });

    var myChart1 = echarts.init(document.getElementById("myChart2"));
    myChart1.value = myChart1;
    myChart1.setOption({
      backgroundColor: "#fff",
      color: color1,
      legend: {
        top: 20
      },
      tooltip: {
        trigger: "axis",
        formatter: function () {
          return "";
        }
      },
      grid: {
        top: 100,
        containLabel: true
      },
      xAxis: [
        {
          name: "月份",
          type: "category",
          boundaryGap: false,
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#606266"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#E4E7ED"
            }
          },
          axisTick: {
            show: false // 刻度出来的尖尖
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#E4E7ED"],
              width: 1,
              type: "solid"
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#DCDFE6" //坐标轴指示线
            },
            show: true //不坐标轴指示线
          },
          nameTextStyle: {
            color: "#606266",
            fontSize: 12,
            lineHeight: 40,
            padding: [0, 0, 0, -15]
          },
          data: arr2
        }
      ],
      yAxis: [
        {
          type: "value",
          name: "身高",
          axisLabel: {
            textStyle: {
              color: "#606266"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#E4E7ED"
            }
          },
          axisTick: {
            show: false // 刻度出来的尖尖
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#E4E7ED"],
              width: 1,
              type: "solid"
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#DCDFE6" //坐标轴指示线
            },
            show: true //不坐标轴指示线
          },
          nameTextStyle: {
            color: "#606266",
            fontSize: 12,
            lineHeight: 40
          }
        }
      ],
      series: [
        {
          // name: "2018",
          name: "国际",
          type: "line",
          smooth: true,
          symbolSize: 8,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: color1[0]
            }
          },
          symbol: "circle", //数据交叉点样式
          // itemStyle: {
          //     normal: {
          //         color: "#ffffff",
          //         borderColor: '#D0443B',
          //         borderWidth: 1,
          //     }
          // },
          data: arr
        },
        {
          name: "我的",
          type: "line",
          smooth: true,
          symbolSize: 8,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: color1[1]
            }
          },
          symbol: "circle", //数据交叉点样式 (实心点)
          // itemStyle: {
          //     normal: {
          //         color: "#ffffff",
          //         borderColor: '#3EA4AA',
          //         borderWidth: 1,
          //     }
          // },
          data: res.data.data.contents.sumHeight
        }
      ]
    });
    window.addEventListener("resize", function () {
      myChart1.resize();
    });

    var myChart2 = echarts.init(document.getElementById("myChart3"));
    myChart2.value = myChart2;
    myChart2.setOption({
      backgroundColor: "#fff",
      color: color2,
      legend: {
        top: 20
      },
      tooltip: {
        trigger: "axis",
        formatter: function () {
          return "";
        }
      },
      grid: {
        top: 100,
        containLabel: true
      },
      xAxis: [
        {
          name: "月份",
          type: "category",
          boundaryGap: false,
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#606266"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#E4E7ED"
            }
          },
          axisTick: {
            show: false // 刻度出来的尖尖
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#E4E7ED"],
              width: 1,
              type: "solid"
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#DCDFE6" //坐标轴指示线
            },
            show: true //不坐标轴指示线
          },
          nameTextStyle: {
            color: "#606266",
            fontSize: 12,
            lineHeight: 40,
            padding: [0, 0, 0, -15]
          },
          data: arr3
        }
      ],
      yAxis: [
        {
          type: "value",
          name: "体重",
          axisLabel: {
            textStyle: {
              color: "#606266"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#E4E7ED"
            }
          },
          axisTick: {
            show: false // 刻度出来的尖尖
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#E4E7ED"],
              width: 1,
              type: "solid"
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#DCDFE6" //坐标轴指示线
            },
            show: true //不坐标轴指示线
          },
          nameTextStyle: {
            color: "#606266",
            fontSize: 12,
            lineHeight: 40
          }
        }
      ],
      series: [
        {
          // name: "2018",
          name: "国际",
          type: "line",
          smooth: true,
          symbolSize: 8,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: color2[0]
            }
          },
          symbol: "circle", //数据交叉点样式
          // itemStyle: {
          //     normal: {
          //         color: "white",
          //         borderColor: '#D0443B',
          //         borderWidth: 1,
          //     }
          // },
          data: arr1
        },
        {
          name: "我的",
          type: "line",
          smooth: true,
          symbolSize: 8,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: color2[1]
            }
          },
          symbol: "circle", //数据交叉点样式 (实心点)
          // itemStyle: {
          //     normal: {
          //         color: "#ffffff",
          //         borderColor: '#3EA4AA',
          //         borderWidth: 1,
          //     }
          // },
          data: res.data.data.contents.sumWeight
        }
      ]
    });
    window.addEventListener("resize", function () {
      myChart2.resize();
    });
  })

});
</script>

<style scoped>
.biao1 {
  width: 25%;
  border-bottom: 1px solid #2ab28b;
  border-right: 1px solid #2ab28b;
  color: black;
}

.biao5 {
  width: 25%;
  border-right: 1px solid #2ab28b;
  color: black;
  height: 40px;
  line-height: 40px;
}

.biao6 {
  width: 25%;
  border-right: 1px solid #2ab28b;
  color: #000;
}

.biao2 {
  width: 25%;
  border-bottom: 1px solid #2ab28b;
  border-right: 1px solid #2ab28b;
  color: #000;
}

.biao3 {
  width: 25%;
  border-bottom: 1px solid #2ab28b;
  color: black;
}

.biao4 {
  width: 75%;
  border-bottom: 1px solid #2ab28b;
  color: #000;
}

.biao7 {
  width: 25%;
  color: #000;
  border: 1px solid #2ab28b;
}

.params {
  width: 100%;
  font-size: 22px;
  font-weight: bold;
}

#basic .title {
  font-size: 36px;
  width: 100%;
  text-align: center;
}

#basic {
  font-size: 14px;
  width: 1075px;
  min-height: 1244px;
  overflow: hidden;
  padding: 0;
  word-break: break-all;
  margin: 60px auto 0 auto;
  box-shadow: var(--el-box-shadow-light);
  border-radius: var(--el-card-border-radius);
  background-color: var(--el-card-bg-color);
  /* color: var(--el-text-color-primary); */
  transition: var(--el-transition-duration);
  --el-card-border-color: var(--el-border-color-light, #ebeef5);
  --el-card-border-radius: 4px;
  --el-card-padding: 20px;
  --el-card-bg-color: var(--el-color-white);
}

#basic #createTime {
  font-size: 16px;
  color: #999999;
  float: right;
}

.subTitle {
  font-size: 30px;
  text-align: center;
  height: 30px;
  color: #2ab28b;
}

.right-box-card {
  margin-left: 2%;
  margin-top: 1%;
  position: static;
  top: calc(260px);
  width: 60%;
  float: left;
  /*min-height: 650px;*/
}

.images-wrapper {
  width: 100%;
  position: relative;
  height: 173px;
  font-weight: bold;
}

.foodsNames {
  color: red;
}


.images-content {
  position: absolute;
  z-index: 1;
  line-height: 54px;
  top: calc(55% - 54px);
  overflow: hidden;
  margin-left: 55%;
  font-size: 18px;

}

.service_plate {
  background: url('../../assets/img/evaluaction_service_plate.png') center no-repeat;
}

.dietOn {
  height: 510px;
}

.everyRed {
  color: red;
}

.everyOrange {
  color: orange;
}

.everyBlack {
  color: #333333;
}

.time-botton {
  background-color: #2ab28b;
  width: 108px;
  height: 41px;
  color: #fff;
  font-size: 16px;
  border-radius: 100px;
  line-height: 41px;
  margin: 42px 0 0 40px;
  text-align: center;
}

.time-type {
  width: 58px;
  height: 58px;
  line-height: 58px;
  text-align: center;
  background: #85CE61;
  border-radius: 50%;
  opacity: 1;
  color: #fff;
  box-shadow: 5px 5px 2px #888888;
  margin: 20px 0 20px 40%;
}

.der {
  width: 240px;
  height: 174px;
  background: url("../../assets/img/evaluaction_service_plate.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.platesFoods {
  margin-top: 5px;
  margin-left: 8px;

  color: #333333;
  font-size: 16px;
}

.platesFoods div {
  padding-bottom: 18px;

}

.platesFoods span {
  color: #666666;
}

.plates {
  width: 33%;
  float: left;
}

.plates .plates-top-img {
  float: left;
  margin-left: 1%;
  width: 30%;
}

.time-left-color {
  background: #85CE61;
}

.time-common-color {
  background: #E8B973;
}

.time-right-color {
  background: #6EA9E0;
}

.images-lab {
  position: absolute;
  z-index: 1;
  line-height: 54px;
  top: calc(85% - 54px);
  overflow: hidden;
  margin-left: 55%;
  font-size: 50px;
}

#params {
  margin-top: 3%;
  font-size: 22px;
  font-weight: bold;
}

.shu {
  width: 5px;
  height: 30px;
  background: #2ab28b;
  opacity: 1;
  border-radius: 100px;
  float: left;
  margin-right: 2%;
  margin-left: 3%;
}

#params span {
  font-size: 15px;
  color: #666;
  margin-left: 2%;
}

li {
  list-style-type: none;
}

#params ul {
  margin-left: 3%;
}

.topColor {
  color: #E8B973;
}

.topBgColor {
  border: 1px solid #E8B973;
  background-color: #E8B973;
}

.normalColor {
  color: #2ab28b;
}

.normalBgColor {
  border: 1px solid #2ab28b;
  background-color: #2ab28b;
}

.bottomColor {
  color: #6CA9E3;
}

.bottomBgColor {
  border: 1px solid #6CA9E3;
  background-color: #6CA9E3;
}

.images-lab span {
  font-size: 18px;
}

.images-right {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;
  width: 15%;
  height: 20%;
  line-height: 34px;
  top: calc(95% - 54px);
  overflow: hidden;
  margin-left: 75%;
  font-size: 18px;
  border-radius: 30px;
  color: #fff;
  text-align: center;
}


#enerty .bt {
  background: #F7F7F7;
  color: #fff;
}

#enerty .bt span {
  width: 25%;
  float: left;
  text-align: center;
  color: #999999;
  line-height: 30px;
}

#enerty ul li {
  width: 48%;
  display: inline-block;
  margin: 0;
}

#enerty .element span {
  width: 25%;
  float: left;
  text-align: center;
  line-height: 60px;
  font-size: 14px;
}</style>
